<template>
    <div>
        <div id="qq">
            <div id="aa">
                <span class="fa fa-angle-left" @touchstart="back"></span>
            </div>
            <div id="zz">我的购物车</div>
            <div><span class="fa fa-comment-o" id="pp"></span></div>
            <div id="ww">···</div>
        </div>
        <div id="zhong" v-if="isxianshi">
            <div v-for="(goods,k) in cartList" class="box">
                <div class="lei">
                    <input type="checkbox" @change="categoryCheck(k,$event)" :checked="isCategoryCheck(k)">
                    <label for="">{{k}}</label>
                </div>
                <div v-for="g in goods" class="box1">
                    <div class="box4">
                        <input type="checkbox" v-model="g.check" @change="$forceUpdate()">
                        <router-link :to="'/user/find/gooddetail/'+g.goods._id"><img :src="'/avatar/'+g.goods.pics[0]" alt=""></router-link>
                    </div>
                    <div class="box3">
                        <div><span>{{g.goods.name}}</span></div>
                        <div>极致奢华，你值得拥有</div>
                        <div><span>￥{{g.goods.price*g.gnum}}</span></div>
                        <div><button @touchstart="numberDecrease(g)">-</button><span>{{g.gnum}}</span><button @touchstart="g.gnum++">+</button></div>
                        <div id="delete"><span @touchstart="shanchu(g.goods._id)">x</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="zhong2" v-if="!isxianshi">
            <img src="/static/2.png" alt="">
            <p>你还没有商品，
                <router-link to="/">去逛逛</router-link>
            </p>
        </div>
        <div id="wei" v-if="isxianshi">
            <div id="nn" class="san"><input type="checkbox" @change="checkAll" :checked="isCheckAll()"><span>全选</span></div>
            <div id="mm" class="san">
                <p><span>预计支付：</span><span>￥{{totalPrice}}</span></p>
                <p>总价￥0</p>
            </div>
            <div id="bb" class="san">去结算</div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                data1: [],
                isxianshi:false
            }
        },
        computed: {
            cartList: function () {
                var goodCategory = {};
                this.data1.forEach(e => {
                    // var check=false;
                    if (!goodCategory[e.goods.type[0].name]) {
                        goodCategory[e.goods.type[0].name] = [];
                    }
                    goodCategory[e.goods.type[0].name].push(e);
                });
                // console.log(goodCategory)
                return goodCategory;
            },
            totalPrice: function () {
                return this.data1.map(g => {
                    if (!g.check) {
                        return 0;
                    }
                    return g.goods.price * g.gnum;
                }).reduce((pre, price) => {
                    return pre + price;
                }, 0);
            }

        },
        methods: {
            back: function () {
                history.back();
            },
            categoryCheck: function (k, e) {
                this.cartList[k].forEach(g => {
                    g.check = e.target.checked;
                });
                this.$forceUpdate();
            },
            //判断某个分区是否所有的商品都被选中。
            isCategoryCheck: function (k) {
                return this.cartList[k].every(e => {
                    return e.check;
                });
            },
            checkAll: function (e) {
                this.data1.forEach(g => {
                    g.check = e.target.checked;
                });
                this.$forceUpdate();
            },
            isCheckAll: function () {
                return this.data1.every(g => {
                    return g.check;
                });
            },

            numberDecrease: function (g) {
                if (g.gnum > 1) {
                    g.gnum--;
                }
                // console.log(g.gnum)
            },
            shanchu: function (i) {
                // console.log(i)
                var logObj = {
                    _id: i,
                }
                this.$store.dispatch("requestDelete", logObj)
                    .then(res => {
                        // console.dir(res.data);
                        this.layer.alert(res.data.msg);
                        this.$store.dispatch("requestFindcar")
                            .then(res => {
                                for (var i = 0; i < res.data.data.length; i++) {
                                    res.data.data[i].check = true;
                                }
                                this.data1 = res.data.data;
                                // console.dir(this.data1[0].gnum)
                            });
                    });
            }
        },
        mounted: function () {
            this.$store.dispatch("requestFindcar")
                .then(res => {
                    if (res.data.data.length > 0) {
                        this.isxianshi=true;
                        for (var i = 0; i < res.data.data.length; i++) {
                            res.data.data[i].check = true;
                        }
                        this.data1 = res.data.data;
                    }else{
                        this.isxianshi=false;
                    }

                    // console.dir(this.data1[0].gnum)
                });
        }
    }

</script>

<style scoped>
    p {
        margin: 0;
    }

    #qq {
        display: flex;
        height: 10vh;
        width: 100vw;
        border-bottom: solid 2px #bbb;
        background-color: #eee;
    }

    #aa {
        width: 10vh;
        height: 10vh;
        font-size: 8vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zz {
        width: 50vh;
        text-align: center;
        line-height: 10vh;
    }

    #pp {
        line-height: 10vh;
        font-size: 5vh;
        color: #999;
    }

    #ww {
        width: 10vh;
        height: 10vh;
        font-size: 10vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zhong {
        height: 80vh;
        width: 100vw;
        background-color: #eee;
        overflow-y: scroll;
    }

    #wei {
        display: flex;
        border-top: solid 1px #ccc;
        position: relative;
    }

    .san {
        /*width: 33.3vw;*/
        height: 10vh;
    }

    #nn {
        line-height: 10vh;
        padding-left: 10px;
        font-size: 12px;
        color: #666;
    }

    #mm {
        line-height: 10vh;
        font-size: 12px;
        color: #666;
        position: absolute;
        right: 90px;
    }

    #mm p {
        height: 5vh;
        line-height: 5vh;
        text-align: right;
        padding-right: 5px;
    }

    #mm p:nth-of-type(1) {
        color: #FF5B28;
        font-size: 14px;
    }

    #bb {
        background-color: #ccc;
        color: white;
        font-size: 14px;
        text-align: center;
        line-height: 10vh;
        position: absolute;
        padding: 0 15px;
        right: 8px;
        bottom: 0;
    }

    .dange {
        display: flex;
        justify-content: space-around;
        width: 95vw;
        height: 40vw;
        background-color: white;
        margin: 10px 5px;
    }

    .tu {
        width: 30vw;
        height: 30vw;
        margin-top: 5vw;
    }

    .q1 {
        margin-top: 7vw;
        font-size: 14px;
        color: black;
    }

    .q2 {
        color: #888888;
    }

    .q3 {
        color: red;
    }

    .q4 {
        color: black;
    }

    .box {
        width: 100vw;
    }

    .box1 {
        display: flex;
        height: 40vw;
        /*border: solid 1px black;*/
        padding: 2vw;
        margin: 2vw;
        background-color: white;
    }

    .box1 input {
        position: relative;
        top: -14vw;
        ;
    }

    .box1 img {
        width: 26vw;
        height: 26vw;
        margin-top: 7vw;
        margin-left: 3vw;
    }

    .box3 {
        display: block;
        margin-left: 10vw;
        margin-top: 2vw;
        width: 50vw;
        position: relative;
    }

    .box4 {
        width: 50vw;
    }

    .lei {
        background-color: white;
    }

    #delete {
        width: 16px;
        height: 16px;
        border-radius: 8px;
        /*border: solid 1px black;*/
        position: absolute;
        top: 0;
        ;
        right: 0;
        line-height: 12px;
        text-align: center;
        background-color: #bbb;
        color: red;
        cursor: pointer;
    }
    #zhong2{
        text-align: center;
    }
    #zhong2 img{
        width: 50vw;
        height: 50vw;
        margin-top: 20vw;
    }
</style>